<template>
  <el-header class="home-header">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col :span="4">
        <h1 class="logo">吴硕展的惊喜一餐</h1>
      </el-col>
      <el-col :span="14">
        <el-menu mode="horizontal" default-active="home">
          <el-menu-item index="home" @click="navigateToHome">首页</el-menu-item>
          <el-menu-item index="restaurants" @click="navigateToRestaurants">餐厅</el-menu-item>
          <el-menu-item index="user" @click="navigateToUserProfile">个人信息</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();

    // 跳转到首页
    const navigateToHome = () => {
      router.push('/');
    };

    // 跳转到餐厅列表页
    const navigateToRestaurants = () => {
      router.push('/restaurant/:id');
    };

    // 跳转到用户信息页
    const navigateToUserProfile = () => {
      router.push('/user');
    };

    return {
      navigateToHome,
      navigateToRestaurants,
      navigateToUserProfile
    };
  },
};
</script>

<style scoped>
/* 页头样式 */
.home-header {
  text-align: center;
  background-color: rgba(106, 236, 70, 0.7); /* 背景色透明 */
  padding: 10px 20px; /* 减小页头的内边距 */
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

/* 导航栏 */
.el-menu {
  margin: 0;
  padding: 0;
}

.el-menu-item {
  font-size: 16px; /* 减小菜单项的字体 */
  color: #333;
}

.el-menu-item:hover {
  background-color: #3acce7; /* 鼠标悬停时的颜色 */
}

.el-menu-item.is-active {
  background-color: #5a388e; /* 当前选中的颜色 */
}

/* Logo 样式 */
.logo {
  font-size: 18px; /* Logo字体减小 */
  color: #333;
  font-weight: bold;
}
</style>
